<!DOCTYPE>
<html>

<head>
  <meta charset="utf-8">
  <title>IFE JavaScript Task 17</title>
  <script src="js/task17.js"></script>
</head>

<body>
  <fieldset>
    <legend>说明</legend>
    <dl>
      <dt>任务目的</dt>
      <dd>在上一任务基础上继续JavaScript的体验</dd>
      <dd>接触更加复杂的表单对象</dd>
      <dd>实现页面上的一个完整交互功能</dd>
      <dd>用DOM实现一个柱状图图表</dd>
    </dl>
    <dl>
      <dt>任务目的</dt>
      <dd>参考以下示例代码，原始数据包含几个城市的空气质量指数数据</dd>
      <dd>用户可以选择查看不同的时间粒度，以选择要查看的空气质量指数是以天为粒度还是以周或月为粒度
        <dd>天：显示每天的空气质量指数</dd>
        <dd>周：以自然周（周一到周日）为粒度，统计一周7天的平均数为这一周的空气质量数值，如果数据中缺少一个自然周的几天，则按剩余天进行计算</dd>
        <dd>月：以自然月为粒度，统一一个月所有天的平均数为这一个月的空气质量数值</dd>
      </dd>
      <dd>用户可以通过select切换城市</dd>
      <dd>通过在"aqi-chart-wrap"里添加DOM，来模拟一个柱状图图表，横轴是时间，纵轴是空气质量指数，<a target="_blank" href="http://7xrp04.com1.z0.glb.clouddn.com/task_2_17_1.jpg">参考图（点击打开）</a>。天、周、月的数据只根据用户的选择显示一种。
        <dd>天：每天的数据是一个很细的矩形</dd>
        <dd>周：每周的数据是一个矩形</dd>
        <dd>月：每周的数据是一个很粗的矩形</dd>
      </dd>
      <dd>鼠标移动到柱状图的某个柱子时，用title属性提示这个柱子的具体日期和数据</dd>
    </dl>
  </fieldset>
  <fieldset id="form-gra-time">
    <legend>请选择日期粒度：</legend>
    <label>日
      <input name="gra-time" value="day" type="radio" checked="checked">
    </label>
    <label>周
      <input name="gra-time" value="week" type="radio">
    </label>
    <label>月
      <input name="gra-time" value="month" type="radio">
    </label>
  </fieldset>
  <fieldset>
    <legend>请选择查看的城市：</legend>
    <select id="city-select">
      <option value="1">北京</option>
    </select>
  </fieldset>
  <div class="aqi-chart-wrap">
  </div>
  <div>
</body>

</html>
